<template>
  <view class="oral-photos" v-cloak>
    <view class="photos-list" v-if="list.length">
      <view class="list-item" v-for="(item,idx) in list" :key="item" @click="handlePreImg(idx)">
        <image :src="item" mode="aspectFill" class="img"></image>
        <image src="@/static/checked_false.svg" mode="aspectFill" class="icon" @click.stop="handleDeleteImg(idx)"></image>
      </view>
    </view>
    <view class="photos-button var-button" v-else @click="handleChoiseImg()">选择图片</view>
    
    <view class="photos-footer">
      <view class="button cancel" @click="handleChoiseImg()">选择图片({{list.length}})</view>
      <view class="button" @click="handleToUrl('/doctorPackage/photos-generated')">下一步</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list:[],
      };
    },
    methods:{
      handleToUrl(url){
        if(this.list.length>0){
          uni.navigateTo({
            url
          })
        }else{
          this.$toast('请先选择图片')
        }
      },
      handleChoiseImg(){ ///  选择图片
        if(this.list.length == 9){
          this.$toast('最多可选择9张图片')
          return;
        }
        uni.chooseImage({
        	count: 9, //默认9
        	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        	sourceType: ['album'], //从相册选择
        	success: (res) => {
            this.list = res.tempFilePaths
            uni.setStorageSync('ChangeReportInfo',this.list)
        	}
        });
      },
      handleDeleteImg(e){  //  删除图片
        this.list.splice(e,1)
      },
      handlePreImg(e){
        uni.previewImage({
          urls:this.list,
          current:e
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.oral-photos{
  padding-bottom: 140rpx;
  .photos-title{
    padding: 0 24rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: var(--sub-title);
    background: var(--page-bg);
    .h2{
      font-size: 32rpx;
      font-weight: bold;
      color: var(--title-color);
    }
  }
  
  .photos-list{
    display: flex;
    flex-wrap: wrap;
    padding: 24rpx;
    .list-item{
      border-radius: 20rpx;
      width: 224rpx;
      height: 224rpx;
      margin-right: 14rpx;
      margin-bottom: 14rpx;
      position: relative;
      overflow: hidden;
      &:nth-child(3n){
        margin-right: 0;
      }
      .img{
        width: 100%;
        height: 100%;
      }
      .icon{
        width: 46rpx;
        height: 46rpx;
        position: absolute;
        right: 4rpx;
        top: 4rpx;
      }
    }
  }
  .photos-button{
    margin: 200rpx 50rpx;
  }
  .photos-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 24rpx 68rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .button{
      color: #fff;
      line-height: 56rpx;
      width: 142rpx;
      text-align: center;
      background: var(--theme-color);
      border-radius: 8rpx;
      font-size: 24rpx;
      border: 2rpx solid var(--theme-color);
      &.cancel{
        border-color: var(--border-color);
        color: #6D6D6D;
        background: #fff;
      }
    }
  }
}
</style>
